<template>
	<view class="container pad20">
		<sb-back-icon />
		<sb-loading-container ref='loadingRef'>
			<sb-empty v-if='!siteList.length' />
			<view v-else class="">
				<view class="padv30 marv20 padh20 relative bg-white radius10" @click="selectAddress(res)"
					v-for="(res, i) in siteList" :key="res.id">
					<view class="absolute no font24 flex a-c j-c left0 top0">{{i+1}}</view>
					<view class="flex a-c padv20">
						<view class="bold">{{ res.name }}</view>
						<view class="padh20">{{ res.tel }}</view>
						<view class="default font24 c-w padh10 padv6 radius6" v-if="res.first === 1">
							Default
						</view>
					</view>
					<view class="flex j-s a-c">
						<view class="c-d">{{ res.region }}</view>
						<view>
							<u-icon name="edit-pen" :size="40" class="marh30"
								@click.native.stop="()=>$go2(`/pages/main/address/edit?id=${res.id}`)">
							</u-icon>
							<u-icon name="trash" :size="40" color="#ccc" @click.native.stop="handleDelete(res.id)">
							</u-icon>
						</view>
					</view>
				</view>
			</view>
		</sb-loading-container>
		<view class="btn-add fixed flex a-c j-c bold" @click="$go2('/pages/main/address/edit')">
			<u-icon name="plus-circle" color="#ffffff" class='marh10' :size="40"></u-icon>
			New Address
		</view>
	</view>
</template>

<script>
	import { mapMutations } from "vuex";
	export default {
		data() {
			return {
				siteList: [],
				fromOrder: 0, // 是否从下单页面而来
				qs: {
					pageIndex: 1,
					pageSize: 10,
				},
			};
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500);
			this.refresh()
		},
		onReachBottom() {
			this.qs.pageIndex++
			this.getList();
		},
		onLoad: function({ fromOrder }) {
			if (!this.$checkLogin()) return this.$redirect2Login();
			if (fromOrder) this.fromOrder = fromOrder;
		},
		onReady() {
			this.refresh()
		},
		methods: {
			refresh() {
				this.qs.pageIndex = 1;
				this.getList();
			},
			async handleDelete(id) {
				await this.$confirm('Confirm ? ')
				let { success } = await this.$postB('/cus-address/del', { id })
				if (!success) return this.$msg("fail")
				this.$msg('success', this.refresh())
			},
			...mapMutations(["SET_ADDRESS"]),
			selectAddress(item) {
				if (this.fromOrder) {
					this.SET_ADDRESS(item);
					this.$go2("/pages/main/order/detail");
				}
			},
			async getList() {
				this.$refs.loadingRef.show()
				let { success, data: { rows }, } = await this.$get("/cus-address/list", this.qs);
				if (this.qs.pageIndex === 1) this.siteList = []
				if (!rows.length) {
					if (this.qs.pageIndex > 1) this.$msg("no more")
				} else {
					rows.forEach((item) => item.show = false);
					this.siteList = this.siteList.concat(rows)
				}
				this.$refs.loadingRef.hide()
			},
		},
	};
</script>

<style lang="scss" scoped>
	.no {
		background-color: #c03;
		width: 40rpx;
		height: 40rpx;
		color: #eee;
	}

	.default {
		background-color: #c03;
	}

	.btn-add {
		background: $main-color;
		color: #fff;
		width: 70%;
		height: 100rpx;
		left: calc(50% - 35%);
		line-height: 100rpx;
		border-radius: 50rpx;
		bottom: 40rpx;
	}
</style>
